<template>
    <div class="dashboard-container" v-loading="loading">
      <el-row class="list-menu">
        <el-button type="primary" @click="drawer = true">新增</el-button>
        <!-- <el-button type="warning">修改</el-button>
        <el-button type="danger">删除</el-button> -->
      </el-row>
  
      <el-card>
        <el-table
          :data="data.list"
          border
          style="width: 100%">
          <el-table-column
            prop="group"
            label="分组"
            width="180">
          </el-table-column>
          <el-table-column
            prop="img"
            label="图片"
            width="180">

            <template slot-scope="scope">
              <el-image class="list-img" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="link"
            label="链接"
            width="180">
          </el-table-column>
          <el-table-column
            prop="remarks"
            label="备注">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="180">
            <template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态">
            <template slot-scope="scope">{{ scope.row.status ? '启用': '禁用' }}</template>
          </el-table-column>
          <el-table-column
            prop="sort"
            width="80px"
            label="排序">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="modifyCamp(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="delCamp(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination :data="data" @currentChange="currentChange"></pagination>
      </el-card>


      <el-drawer
        title="广告"
        custom-class="w-drawer"
        :visible.sync="drawer"
        :direction="direction"
        @close="drawerClose"
        :before-close="handleClose">
        
        <div class="add-type">
          <el-form ref="form" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="分组" prop="group">
              <el-select v-model="form.group" placeholder="请选择分组">
                <el-option :label="item.typeName" :value="item.typeName" v-for="(item, index) in tableData" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="图片" prop="img">
              <el-upload
              list-type="picture-card"
              class="upload-demo"
              :action="postFileUlr"
              :show-file-list="false"
              :on-success="uploadSuccess"
              multiple>
              <el-image v-if="form.img" class="swiper-ad" lazy fit="cover" :src="form.img"></el-image>
              <i class="el-icon-plus avatar-uploader-icon" v-else></i>
            </el-upload>
            </el-form-item>
            <el-form-item label="状态" label-width="80px" prop="status">
              <el-select v-model="form.status" placeholder="请选择状态">
                <el-option label="启用" value="true"></el-option>
                <el-option label="禁用" value="false"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="链接">
              <el-input v-model="form.link" placeholder="小程序页面路径"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="form.sort"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <el-button type="primary" class="drawer-bottom" @click="submit('form')">确认</el-button>
      </el-drawer>
    </div>
  </template>
  
  <script>
  import { mapActions, mapGetters } from 'vuex'
  import {parseTime} from '@/utils/index';
  import request from '@/utils/request';
  export default {
    name: 'Dashboard',
    data() {
      this.parseTime = (d)=> parseTime(d)
      return {
        postFileUlr: process.env.VUE_APP_BASE_API + '/upload-file',
        tableData: [],
        drawer: false,
        loading: true,
        direction: 'rtl',
        form: {
          img: ''
        },
        rules: {
          group:[{ required: true, message: '请输入分类名称', trigger: 'blur' }],
          status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
          img: [{ required: true, message: '请上传图片', trigger: 'blur' }],
        },
        list: [],
        drawerType: 1,
        data: {},
      }
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    mounted() {
      this.getList();
      this.getAdGroup();
    },
    methods: {
      currentChange(e) {
          this.getList(e);
      },
      delCamp(item) {
            this.$confirm(`此操作将永久删除, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                request.get('/ad-swiper/remove', {
                    params: {
                        id: item._id,
                    },
                }).then((res)=> {
                    this.getList();
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
      },
      modifyCamp(item) {
        this.form = item;
        this.drawer = true;
        this.drawerType = 2;
      },
      uploadSuccess(response, file, fileList) {
        let img = response.data.file_list[0];
        this.form.img = img.download_url;
        this.form.fileid = img.fileid;
      },
      getAdGroup() {
        request.get(`/ad-group`).then((res)=> {
          this.tableData = res.data;
        })
      },
      getList(num) {
        request.get(`/ad-swiper`, {
          params: {
            pageNum: num || 1,
          }
        }).then((res)=> {
          this.data = res.data;
          this.loading = false;
        })
      },
      handleClose(done) {
        done();
      },
      submit(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {

            if (this.drawerType == 2) {

              request.get('/ad-swiper/update', {
                params: this.form,
              }).then((res)=> {
                _this.drawer = false;
                this.getList();
              })
              return;
            }

            this.form.createTime = new Date().getTime();
            request.get('/ad-swiper/add', {
              params: this.form,
            }).then((res)=> {
              _this.drawer = false;
              this.getList();
            })
            // alert('添加成功')
          }
        });
      },
      drawerClose() {
        this.form = {};
        this.drawerType = 1;
      },
    },
  }
  </script>
  <style lang="scss">
  .w-drawer{
    .el-drawer__body{
        overflow-y: scroll;
        padding-bottom: 80px;
    }
}
</style>
  <style lang="scss" scoped>

  .swiper-ad, .upload-demo{
    width: 300px;
    height: 150px;
  }
  .drawer-bottom{
    display:block;
    margin: auto;
    // position: absolute;
    // bottom: 20px;
    // left: 50%;
    // transform: translateX(-50%);
  }
  .add-type{
    padding: 20px;
  }
  .list-menu{
    margin-bottom: 40px;
  }
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .list-img{
    height: 50px;
  }
  </style>
  